<template>
  <div class="login-box">
    <div class="login-content">
      <h3>新活动后台</h3>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="account">
          <el-input type="test" v-model="formData.account" autocomplete="off" placeholder="请输账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passwd">
          <el-input type="password" v-model="formData.passwd" autocomplete="off" placeholder="请输密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd" v-if="formData.operationType === 'modifyPwd'">
          <el-input type="password" v-model="formData.newPwd" autocomplete="off" placeholder="请输新密码"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码" prop="checkNewPwd" v-if="formData.operationType === 'modifyPwd'">
          <el-input type="password" v-model="formData.checkNewPwd" autocomplete="off" placeholder="再次输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('formData')" class="_submit_">提交</el-button>
          <el-button type="text" class="go-register" @click="formData.operationType='modifyPwd'" v-if="formData.operationType==='login'">修改密码</el-button>
          <el-button type="text" class="go-register" @click="formData.operationType='login'" v-else>登录</el-button>

          <!-- <el-button type="text" class="go-register" @click="$router.push('/register')">去注册</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { rouerFormData } from 'common/js/getRoute';
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		var validateUserName = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入用户名'));
			} else {
				callback();
			}
		};
		var validatePasswd = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入交易密码'));
			} else if (String(value).length < 6) {
				callback(new Error('密码长度应大于6位'));
			} else {
				callback();
			}
		};
		var validateNewPwd = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				console.log(this.formData, 'this.$refs.formData');
				if (this.formData.checkNewPwd !== '') {
					this.$refs.formData.validateField('checkNewPwd');
				}
				callback();
			}
		};
		var validateCheckNewPwd = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.formData.newPwd) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			formData: {
				account: '',
				passwd: '',
				newPwd: '',
				checkNewPwd: '',
				operationType: 'login', // 操作
			},

			submitIng: false,
			rules: {
				account: [{ validator: validateUserName }],
				passwd: [{ validator: validatePasswd }],
				newPwd: [{ validator: validateNewPwd }],
				checkNewPwd: [{ validator: validateCheckNewPwd }],
			},
		};
	},
	computed: {},
	mounted() {},
	methods: {
		...mapActions('admin', ['addRouters', 'saveAdminInfo']),
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this._submit();
					// if (this.operationType === 'login') {
					// 	this.login();
					// } else {
					//   this.modifyPwd()
					// }
					// // this.submitIng = true;
					// this.login();
				} else {
					return false;
				}
			});
		},
		_submit() {
			let formData =
				this.formData.operationType === 'login'
					? {
							account: this.formData.account,
							passwd: this.formData.passwd,
					  }
					: this.formData;
			this.$http('/admin/login', formData).then(res => {
				// console.log(res);
				if (res.code === 10200) {
					log.ok(res.msg);
					if (this.formData.operationType === 'login') {
						this.locationSet('isLogin', 1);
						this.locationSet('userInfo', res.data);
						this.saveAdminInfo('userInfo');
						this.getMenuList();
						this.$router.replace('/');
					} else {
						this.formData.operationType = 'login';
					}
					this.clearn();
				} else {
					log.warn(res.msg);
				}
			});
		},
		clearn() {
			for (let key in this.formData) {
				if (key !== 'operationType') {
					this.formData[key] = '';
				}
			}
			this.$refs.formData.resetFields();
		},
	},
};
</script>
<style lang="scss">
.login-box {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #303133;
	.login-content {
		h3 {
			color: #fff;
			font-size: 32px;
			text-align: center;
			padding-left: 30px;
		}
		width: 400px;
		._submit_ {
			width: 100%;
		}
		.go-register {
			float: right;
			margin-right: 15px;
		}
	}
}
</style>


